<template>
<h1>EL-布局</h1>
  <el-row :gutter="20" style="background-color: deepskyblue;">
    <el-col :span="6" style="background-color: greenyellow;">好好好</el-col>
    <el-col :span="6" style="background-color: purple;">O(∩_∩)O哈哈~</el-col>
    <el-col :span="6" style="background-color: deeppink;">红红火火恍恍惚惚</el-col>
    <el-col :span="6" style="background-color: red;">哈哈哈哈</el-col>
  </el-row>
  <h3>两张图</h3>
  <el-row :gutter="10">
  <el-col :span="12"><img src="rich.jpg" alt="" style="width: 50%;"></el-col>
  <el-col :span="12"><img src="rich.jpg" alt="" style="width: 50%;"></el-col>
    <h3>六张图</h3>
</el-row>
  <el-row :gutter="10">
<!--  span一行默认24  -->
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
    <el-col :span="4"><img src="2024.png" alt="" style="width: 100%;"></el-col>
  </el-row>
<h3>列偏移</h3>
</template>

<script setup>

</script>

<style scoped>

</style>